<template>
	<view class="register">
		<view class="logo"><image src="../../static/yibu.png" mode="widthFix"></image></view>

		<view class="text">欢迎注册伊布博客</view>
		<u--form labelWidth="30" labelPosition="left" :model="registerForm" :rules="rules" ref="registerForm">
			<u-form-item leftIcon="edit-pen" prop="name" ref="item1"><u--input v-model="registerForm.name" border="none"></u--input></u-form-item>
			<u-form-item leftIcon="account" prop="phone" ref="item1"><u--input v-model="registerForm.phone" border="none"></u--input></u-form-item>
			<u-form-item leftIcon="lock" prop="password" ref="item1"><u--input type="password" v-model="registerForm.password" border="none"></u--input></u-form-item>
		</u--form>
		<u-button @click="registerAction" class="register-btn">注册</u-button>
	</view>
</template>

<script>
import { register } from '@/config/api.js';
// import {mapMutations}from 'vuex';
export default {
	name: 'register',
	data() {
		return {
			registerForm: {
				phone: '',
				password: '',
				name: ''
			},
			rules: {
				phone: {
					type: 'string',
					required: true,
					length: 11,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					min: 6,
					max: 20,
					required: true,
					message: '请填写6～20位的密码',
					trigger: ['blur', 'change']
				},
				name: {
					type: 'string',
					min: 1,
					max: 6,
					require: true,
					message: '请填写1~6位的昵称',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	methods: {
		async registerAction() {
			try {
				await this.$refs.registerForm.validate();
				const userR = await register(this.registerForm);
				//	如果注册失败，将异常告知给用户
				if (userR.code !== 200)
					return uni.showToast({
						title: user.msg,
						icon: 'error'
					});
				uni.showToast({
					title: '注册成功'
				});
				this.$emit('jumpLogin');
				uni.setStorageSync('userphone', this.registerForm.phone);
			} catch (e) {
				console.log(e);
			}
		}
	}
};
</script>

<style lang="scss">
* {
	font-family: 'catstyle';
}
.register {
	width: 80%;
	height: 65vh;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;
	transform: translateY(10vw);
	.logo {
		width: 104px;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.text {
		margin-top: 10px;
		font-size: 26px;
		font-weight: 600;
		text-align: center;
	}

	::v-deep .uni-input-input {
		width: 89%;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		padding: 0px 10px;
		border-color: rgb(242, 174, 39);
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 38px;
	}

	.register-btn {
		margin-top: 20px;
		background-color: #f09819;
		border-color: #ff5858;
		font-size: 20px;
	}
}
</style>
